<!DOCTYPE html>
<html>
<head>
    <#include "/app/es/common/common_css.ftl">
 
 
    <title>ES赛事活动</title>
    
	 <style type="text/css">
		     body {
		        height: 100%;
		    }
		    html {
		        height: 100%;
		    }
		    .swiper-container {
		        height: 95%;
		         
		    }
			.pagination {
			  position: absolute;
			  z-index: 20;
			  bottom: 10px;
			  width: 100%;
			  text-align: center;
			}
			.swiper-pagination-switch {
			  display: inline-block;
			  width: 8px;
			  height: 8px;
			  border-radius: 8px;
			  background: #fff;
			  margin: 0 5px;
			  opacity: 0.8;
			  border: 1px solid #fff;
			  cursor: pointer;
			}
			.swiper-active-switch {
			  background: #ee4040;
			}
		    .slide-banner{
		        width: 100%;
		        max-height: 280px;
		        overflow: hidden;
		    }
	  </style>
</head>

<body >
    <#include "/app/es/common/header.ftl">
     
	<div class="content match swiper-container swiper-free-mode" style="padding-top: 0px;">
	    <div class="swiper-wrapper" style="padding-top: 0px; padding-bottom: 60px; width: 320px; height: 1338px;">
	        <div class="slide-banner swiper-slide swiper-nested swiper-slide-visible swiper-slide-active">
	            <ul class="slide-list swiper-wrapper" style="width: 1600px; transform: translate3d(-640px, 0px, 0px); transition-duration: 0s; height: 128px;"><li class="swiper-slide swiper-slide-duplicate" style="width: 320px; height: 128px;"><a href="http://es.cga.com.cn/match/event/id/64"><img src="<@context/>app/es/images/594be80c_720x280.jpg"></a></li>
	                                <li class="swiper-slide" style="width: 320px; height: 128px;"><a href="http://es.cga.com.cn/match/event/id/80"><img src="<@context/>app/es/images/5c14ee15_720x280.jpg"></a></li>
	                                <li class="swiper-slide swiper-slide-visible swiper-slide-active" style="width: 320px; height: 128px;"><a href="http://es.cga.com.cn/match/event/id/78"><img src="<@context/>app/es/images/59ce6934_720x280.jpg"></a></li>
	                                <li class="swiper-slide" style="width: 320px; height: 128px;"><a href="http://es.cga.com.cn/match/event/id/64"><img src="<@context/>app/es/images/594be80c_720x280.jpg"></a></li>
	                            <li class="swiper-slide swiper-slide-duplicate" style="width: 320px; height: 128px;"><a href="http://es.cga.com.cn/match/event/id/80"><img src="<@context/>app/es/images/5c14ee15_720x280.jpg"></a></li></ul>
	            <div class="pagination"><span class="swiper-pagination-switch"></span><span class="swiper-pagination-switch swiper-visible-switch swiper-active-switch"></span><span class="swiper-pagination-switch"></span></div>
	        </div>
	            <ul class="match_list2 swiper-slide swiper-slide-visible">
	                                <li onclick="location=&#39;/match/event/id/80&#39;">
	                    <p class="img"><img src="<@context/>app/es/images/592d1910_240x150.jpg"></p>
	                    <dl>
	                        <dt>浩方魔兽争霸1v1挑战赛</dt>
	                        <dd class="brief">
	                            竞技类别：魔兽争霸<br>
	                         <!--   比赛地点：全国<br>-->
	                            报名时间：07-15 — 07-21<br>
	                            比赛时间：07-22 — 07-24                        </dd>
	                    </dl>
	                </li>
	                                <li onclick="location=&#39;/match/event/id/79&#39;">
	                    <p class="img"><img src="<@context/>app/es/images/58f27ada_240x150.jpg"></p>
	                    <dl>
	                        <dt>琳宝宝粉丝水友赛</dt>
	                        <dd class="brief">
	                            竞技类别：英雄联盟<br>
	                         <!--   比赛地点：全国<br>-->
	                            报名时间：07-12 — 07-14<br>
	                            比赛时间：07-12 — 07-14                        </dd>
	                    </dl>
	                </li>
	                                <li onclick="location=&#39;/match/event/id/78&#39;">
	                    <p class="img"><img src="<@context/>app/es/images/5b55bacb_240x150.jpg"></p>
	                    <dl>
	                        <dt>墨筱筱粉丝水友赛</dt>
	                        <dd class="brief">
	                            竞技类别：英雄联盟<br>
	                         <!--   比赛地点：全国<br>-->
	                            报名时间：07-12 — 07-14<br>
	                            比赛时间：07-12 — 07-14                        </dd>
	                    </dl>
	                </li>
	                                <li onclick="location=&#39;/match/event/id/76&#39;">
	                    <p class="img"><img src="<@context/>app/es/images/5a6e0692_240x150.jpg"></p>
	                    <dl>
	                        <dt>澄海3C1V1夏季杯</dt>
	                        <dd class="brief">
	                            竞技类别：澄海3C<br>
	                         <!--   比赛地点：全国<br>-->
	                            报名时间：07-08 — 07-15<br>
	                            比赛时间：07-16 — 07-25                        </dd>
	                    </dl>
	                </li>
	                                <li onclick="location=&#39;/match/event/id/74&#39;">
	                    <p class="img"><img src="<@context/>app/es/images/57909697_240x150.jpg"></p>
	                    <dl>
	                        <dt>2016年浩方DOTA夏季赛</dt>
	                        <dd class="brief">
	                            竞技类别：共2项赛事<br>
	                         <!--   比赛地点：全国<br>-->
	                            报名时间：07-01 — 07-10<br>
	                            比赛时间：07-11 — 07-17                        </dd>
	                    </dl>
	                </li>
	                                <li onclick="location=&#39;/match/event/id/71&#39;">
	                    <p class="img"><img src="<@context/>app/es/images/58ec9e68_240x150.jpg"></p>
	                    <dl>
	                        <dt>MC夏令营-奇趣建筑</dt>
	                        <dd class="brief">
	                            竞技类别：共2项赛事<br>
	                         <!--   比赛地点：全国<br>-->
	                            报名时间：06-24 — 07-19<br>
	                            比赛时间：07-19 — 08-04                        </dd>
	                    </dl>
	                </li>
	                                <li onclick="location=&#39;/match/event/id/70&#39;">
	                    <p class="img"><img src="<@context/>app/es/images/5cb44fa0_240x150.jpg"></p>
	                    <dl>
	                        <dt>MC夏令营-最强史蒂夫</dt>
	                        <dd class="brief">
	                            竞技类别：共2项赛事<br>
	                         <!--   比赛地点：全国<br>-->
	                            报名时间：06-24 — 07-19<br>
	                            比赛时间：07-19 — 08-04                        </dd>
	                    </dl>
	                </li>
	                                <li onclick="location=&#39;/match/event/id/69&#39;">
	                    <p class="img"><img src="<@context/>app/es/images/58f27035_240x150.jpg"></p>
	                    <dl>
	                        <dt>浩方官方测试(玩家请勿报名)</dt>
	                        <dd class="brief">
	                            竞技类别：共10项赛事<br>
	                         <!--   比赛地点：全国<br>-->
	                            报名时间：06-21 — 08-31<br>
	                            比赛时间：06-22 — 09-09                        </dd>
	                    </dl>
	                </li>
	                                <li onclick="location=&#39;/match/event/id/68&#39;">
	                    <p class="img"><img src="<@context/>app/es/images/5ce71c1a_240x150.jpg"></p>
	                    <dl>
	                        <dt>澄海3C_3V3全民赛</dt>
	                        <dd class="brief">
	                            竞技类别：澄海3C<br>
	                         <!--   比赛地点：全国<br>-->
	                            报名时间：06-16 — 06-24<br>
	                            比赛时间：06-25 — 07-09                        </dd>
	                    </dl>
	                </li>
	                                <li onclick="location=&#39;/match/event/id/67&#39;">
	                    <p class="img"><img src="<@context/>app/es/images/5a9bcecb_240x150.jpg"></p>
	                    <dl>
	                        <dt>浩方首届忍者村大战1V1单挑赛</dt>
	                        <dd class="brief">
	                            竞技类别：忍村<br>
	                         <!--   比赛地点：全国<br>-->
	                            报名时间：06-08 — 06-17<br>
	                            比赛时间：06-18 — 06-27                        </dd>
	                    </dl>
	                </li>
	                
	            </ul>
	    </div>
	    <div class="loading" id="pullLoading">
	        <span class="loadingIcon"></span><span class="pullUpLabel">加载中...</span>
	    </div>
	</div>

 
 	<#assign tabbarSelect="event">
    <#include "/app/es/common/tabbar.ftl" />
   
     <#include "/app/es/common/common_js.ftl">
    
    
<script>
    
    var num = 2; //计数器初始化为1
    var mySwiper = new Swiper('.swiper-container',{
        slidesPerView:'auto',
        mode:'vertical',
        watchActiveIndex: true,
        freeMode : true,
        offsetPxAfter : 60,
        onTouchStart: function() {
            holdPosition = 0;

        },
        onResistanceAfter: function(s, pos){
            holdPosition = pos;
        },

        onTouchEnd: function(){
            if (holdPosition>80 && num>0) {
                mySwiper.params.onlyExternal=true;
                mySwiper.appendSlide($(".loading").html(),'loading swiper-slide');
                mySwiper.swipeNext();
                loadNewSlides();
            }
            // 修改轮播图点不显示问题
            mySwiper.reInit();
        }
    });

    var swiperNested = new Swiper('.swiper-nested',{
        calculateHeight : true,
        autoplay:3000,
        loop:true,
        pagination:'.pagination',
        autoplayDisableOnInteraction : false,
        paginationClickable :true,
        resizeReInit : true
    });
    function loadNewSlides(){
        if(num>0){
            setTimeout(function(){
                $.get("/match?n="+num,function(result){
                    t = setTimeout(function(){
                        if(result.length>0){
                            num++;
                            mySwiper.removeLastSlide();
                            mySwiper.appendSlide(result,'match_list2 swiper-slide','ul');
                            mySwiper.params.onlyExternal=false;
                        }else{
                            num = 0;
                            mySwiper.removeLastSlide();
                            mySwiper.params.onlyExternal=false;
                        }
                        swiperNested.reInit();
                    },1);
                });
            },100)
        }
    }

    $(window).on("orientationchange",function(){
        // 横屏竖屏切换 轮播图重新初始化
        mySwiper.reInit();
        swiperNested.reInit();

    });

    // 预加载
     
    
 
 </script>
  
</body>
</html>
